<template>
	<div class="tab" style="height :100%;">
		<router-view></router-view>
		<mu-bottom-nav :value="bottomNav" @change="handleChange">
            <mu-bottom-nav-item v-for="(nav,i) in navs" :key="i" :value="nav.name" :to="{name:nav.name}" :title="nav.text"
                                :icon="nav.icon"/>
        </mu-bottom-nav>
	</div>
</template>
<script>
  export default {
    name: 'app',
    data() {
      return {
        bottomNav: 'Home',
        navs: [
          {
            to: '/',
            icon: 'home',
            text: '首页',
            name: 'Home'
          },
          {
            to: '/intro',
            icon: 'widgets',
            text: '项目评审',
            name: 'Intro'
          },
          {
            to: '/about',
            icon: 'people',
            text: '我的',
            name: 'About'
          }
        ]
      };
    },
    mounted() {
      this.bottomNav = this.$route.name;
    },
    methods: {
      handleChange(val) {
        this.bottomNav = val
      }
    }

  }
</script>
<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        margin-top: 40px;
        margin-bottom: 60px;
    }

    .mu-bottom-nav {
        position: fixed !important;
        width: 100%;
        bottom: 0px;
        left: 0px;
        z-index: 1000;
    }
    .mu-bottom-item{ background:#E6E6FA !important; }
    .mu-appbar {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1000;
        text-align: center;
    }

    .el-loading-spinner .path {
        stroke: white;
    }

    .el-loading-spinner .el-loading-text {
        color: white;
    }

    .el-loading-mask {
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        z-index: 100;
    }
</style>